<template>
	<view class="trends-item">
		<view class="trends-left">
			<view class="trends-avatar">
				<u-avatar :src="item.user_model.avatar" size="40"></u-avatar>
			</view>
			<view class="trends-info">
				<view class="trends-user">
					<view class="trends-name u-line-1">{{item.user_model.name}}</view>
					<!-- <view class="trends-time">{{item.user_model.create_time}}</view> -->
				</view>
				<view class="trends-text u-line-1">{{item.sku_name||'默认规格'}}</view>
			</view>
		</view>
		<view class="trends-right">
			<view class="trends-num">+{{item.num}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"commodity-trends",
		props:{
			item:{
				type:Object,
				default:(()=>{
					return {}
				})
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.trends-item{
		width: 100%;
		padding: 15px;
		background: rgb(243,243,243);
		border-radius: 50px;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.trends-right{
			width: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
			.trends-num{
				font-size: 45rpx;
				color: #666;
				font-weight: bold;
			}
		}
		.trends-left{
			width: 90%;
			display: flex;
			align-items: initial;
			justify-content: space-between;
			.trends-avatar{
				width: 15%;
			}
			.trends-info{
				width: 85%;
				padding-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.trends-text{
					font-size: 28rpx;
					color: #666;
				}
				.trends-user{
					display: flex;
					align-items: center;
					.trends-time{
						font-size: 23rpx;
						color: #d5d5d5;
						margin-left: 10rpx;
					}
					.trends-name{
						font-size: 25rpx;
						color: #666;
						max-width: 300rpx;
					}
				}
			}
		}
	}

</style>